<template>
    <div class="page-header-index-wide">
        <a-row :gutter="24">
            <a-col :sm="24" :md="19" :xl="19" :style="{ marginBottom: '6px' }">
                <a-card style="width: 100%;margin-bottom: 6px;">
                    <a-row :gutter="24">
                        <a-col :sm="24" :md="3" :xl="3">

                        </a-col>
                        <a-col :sm="24" :md="3" :xl="3">
                            <a-statistic title="今日台账" :value="todayCount"
                                :value-style="{ 'margin-left': '14px' }" />
                        </a-col>
                        <a-col :sm="24" :md="3" :xl="3">
                            <a-statistic title="本月台账" :value="monthCount"
                                :value-style="{ 'margin-left': '6px' }" />
                        </a-col>
                        <a-col :sm="24" :md="3" :xl="3">
                            <a-statistic title="厂内车辆" :value="inPlantCount"
                                :value-style="{ 'margin-left': '20px' }" />
                        </a-col>
                        <a-col :sm="24" :md="3" :xl="3">
                            <a-statistic title="非道路移动机械" :value="noRoadCount"
                                :value-style="{ 'margin-left': '36px' }" />
                        </a-col>
                        <a-col :sm="24" :md="3" :xl="3">
                            <a-statistic title="今日进厂总数" :value="todayInCount"
                                :value-style="{ 'margin-left': '32px' }" />
                        </a-col>
                        <a-col :sm="24" :md="3" :xl="3">
                            <a-statistic title="今日上报记录数" :value="todayUploadCount"
                                :value-style="{ 'margin-left': '30px' }" />
                        </a-col>
                        <a-col :sm="24" :md="3" :xl="3">
                            <a-statistic title="今日未上报记录数" :value="todayUnUploadCount"
                                :value-style="{ 'text-align': 'center' }" />
                        </a-col>
                    </a-row>
                </a-card>
                <a-range-picker @change="change" :style="{ marginBottom: '6px' }"
                    :default-value="[moment(currentDate, dateFormat), moment(currentDate, dateFormat)]" />
                <a-row :gutter="24">
                    <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '12px' }">
                        <div style="background-color: #fff; border-radius: 2px;height: 181px">
                            <div id="env" style="height: 181px"></div>
                        </div>
                    </a-col>
                    <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '12px' }">
                        <div style="background-color: #fff; border-radius: 2px;height: 181px">
                            <div id="fuel" style="height: 181px"></div>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '12px' }">
                        <div style="background-color: #fff; border-radius: 2px;height: 181px">
                            <div id="fleet" style="height: 181px"></div>
                        </div>
                    </a-col>
                    <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '12px' }">
                        <div style="background-color: #fff; border-radius: 2px;height: 181px">
                            <div id="goods" style="height: 181px"></div>
                        </div>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-card :bordered="false" title="来车量统计">
                            <div id="countC" style="height: 300px"></div>
                        </a-card>
                    </a-col>
                </a-row>
            </a-col>
            <a-col :sm="24" :md="5" :xl="5" :style="{ marginBottom: '24px' }">
                <a-card style="width: 100%;margin-bottom: 24px;" title="企业信息">
                    爱三（天津）汽车部件有限公司
                </a-card>
                <a-card style="width: 100%;margin-bottom: 24px;" title="管控要求">
                    当前管控措施：主要原辅料及产品公路运输全部采用国六排放标准车辆或新能源车辆
                </a-card>
                <a-card style="width: 100%;margin-bottom: 24px;" title="监管平台通知">
                    监管平台通知
                </a-card>
                <a-card style="width: 100%;margin-bottom: 24px;" title="异常报警">
                    异常报警
                </a-card>
                <a-card style="width: 100%;margin-bottom: 24px;" title="实时记录">
                    实时记录
                </a-card>
            </a-col>
        </a-row>

    </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'

import { getLoginfo, getVisitInfo } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import * as echarts from 'echarts';
import moment from 'moment'

export default {
    name: 'IndexChart',
    components: {
        ATooltip,
        ChartCard,
    },
    data() {
        this.dateFormat = 'YYYY-MM-DD'
        this.currentDate = moment().format('YYYY-MM-DD')
        return {
            todayCount: undefined,
            monthCount: undefined,
            inPlantCount: undefined,
            noRoadCount: undefined,
            todayInCount: undefined,
            todayUploadCount: undefined,
            todayUnUploadCount: undefined,
            pollutionStatus: "0",
            config: {
                data: [],
                textColor: '#000',
                showValue: true,
                columnColor: '#6da1ea',
            },

            loading: true,
            center: null,
            loginfo: {},
            visitFields: ['ip', 'visit'],
            visitInfo: [],
            indicator: <a-icon type="loading" style="font-size: 24px" spin />,
            showChart: false,
            average: '',
            showChart1: false,
            start: '',
            end: '',
        }
    },
    created() {
        setTimeout(() => {
            this.loading = !this.loading
        }, 100)
        this.initLogInfo()
    },
    mounted() {
        this.getCountData()
        this.getChartData(this.currentDate, this.currentDate)
    },
    methods: {
        moment,
        change(date, dateStr) {
            if (dateStr[0] && dateStr[1]) {
                this.getChartData(dateStr[0], dateStr[1])
            }
        },
        getChartData(start, end) {
            this.start = start + ' 00:00:00'
            this.end = end + ' 23:59:59'
            getAction('/carLedger/carLedger/getCharts', { start: this.start, end: this.end }).then((res) => {
                if (res.success) {
                    console.log(res)
                    this.$nextTick(() => {
                        this.getEnvCharts(res.result[0])
                        this.getFuelCharts(res.result[1])
                    })
                }
            })
            getAction('/carLedger/carLedger/getFleetCharts', { start: this.start, end: this.end }).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.getFleetCharts(res.result)
                    })
                }
            })
            getAction('/carLedger/carLedger/getGoodCharts', { start: this.start, end: this.end }).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.getGoodCharts(res.result)
                    })
                }
            })
            getAction('/carRecord/carRecord/getCount', {}).then((res) => {
                if (res.success) {
                    this.$nextTick(() => {
                        this.getCountChart(res.result)
                    })
                }
            })
        },
        getCountData() {
            getAction('/carLedger/carLedger/getDashboardData').then((res) => {
                if (res.success) {
                    this.todayCount = res.result.todayCount
                    this.monthCount = res.result.monthCount
                    this.inPlantCount = res.result.inPlantCount
                    this.noRoadCount = res.result.noRoadCount
                    this.todayInCount = res.result.todayInCount
                    this.todayUploadCount = res.result.todayUploadCount
                    this.todayUnUploadCount = res.result.todayUnUploadCount
                }
            })

        },
        getEnvCharts(result) {
            let arr = []
            let all = result.new_energy_count + result.guo6_count + result.guo5_count + result.lower_guo4_count
            arr.push({ value: result.new_energy_count, name: "新能源" })
            arr.push({ value: result.guo6_count, name: "国六" })
            arr.push({ value: result.guo5_count, name: "国五" })
            arr.push({ value: result.lower_guo4_count, name: "国四及以下" })
            let myChart = echarts.init(document.getElementById('env'));
            // 绘制图表
            myChart.setOption({
                color: ['#fc8251', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
                tooltip: {
                    trigger: 'item', //数据项图形触发
                    formatter: '{b}: {c} 辆 ({d}%)', // 展示格式
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            excludeComponents: ['toolbox'],
                            pixelRatio: 2 // 控制导出图片的分辨率  
                        }
                    }
                },
                title: {
                    text: "各排放标准占比",
                    textStyle: {
                        color: '#1E1E1E',
                        fontSize: 18,
                        fontWeight: 500,
                    },
                    padding: [10, 0, 0, 10], //标题位置
                },
                series: [
                    {
                        name: '来车量',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: ['50%', '70%'],
                        clockwise: false,
                        label: {
                            normal: {
                                position: 'outside',
                                formatter: '{b}\n{c} 辆 ({d}%)',
                            },
                        },
                        data: arr,
                    },
                ],
                graphic: {
                    elements: [
                        {
                            type: 'text', // 组件类型
                            left: 'center', //定位
                            top: '43%', // 定位
                            style: {
                                // 样式
                                text: '记录总数(条)', //文字
                                fontSize: 13, //文字大小
                                textAlign: 'center', //定位
                                width: 30,
                                height: 30,
                                fill: 'darkgray', // 字体颜色
                            },
                        },
                        {
                            type: 'text',
                            left: 'center',
                            top: '52%',
                            style: {
                                text: all,
                                fontSize: 18,
                                textAlign: 'center',
                                width: 30,
                                height: 25,
                                fill: '#3BA5D9',
                            },
                        },
                    ],
                },
            })
        },
        getFuelCharts(result) {
            let arr = []
            let all = result.gasoline_count + result.electric_count + result.diesel_count + result.natural_gas_count + result.other_fuel_count
            arr.push({ value: result.gasoline_count, name: "汽油" })
            arr.push({ value: result.electric_count, name: "电" })
            arr.push({ value: result.diesel_count, name: "柴油" })
            arr.push({ value: result.natural_gas_count, name: "天然气" })
            arr.push({ value: result.other_fuel_count, name: "其他" })
            let myChart = echarts.init(document.getElementById('fuel'));
            // 绘制图表
            myChart.setOption({
                color: ['#fc8251', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
                tooltip: {
                    trigger: 'item', //数据项图形触发
                    formatter: '{b}: {c} 辆 ({d}%)', // 展示格式
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            excludeComponents: ['toolbox'],
                            pixelRatio: 2 // 控制导出图片的分辨率  
                        }
                    }
                },
                title: {
                    text: "燃料占比",
                    textStyle: {
                        color: '#1E1E1E',
                        fontSize: 18,
                        fontWeight: 500,
                    },
                    padding: [10, 0, 0, 10], //标题位置
                },
                series: [
                    {
                        name: '来车量',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: ['50%', '70%'],
                        clockwise: false,
                        label: {
                            normal: {
                                position: 'outside',
                                formatter: '{b}\n{c} 辆 ({d}%)',
                            },
                        },
                        data: arr,
                    },
                ],
                graphic: {
                    elements: [
                        {
                            type: 'text', // 组件类型
                            left: 'center', //定位
                            top: '43%', // 定位
                            style: {
                                // 样式
                                text: '记录总数(条)', //文字
                                fontSize: 13, //文字大小
                                textAlign: 'center', //定位
                                width: 30,
                                height: 30,
                                fill: 'darkgray', // 字体颜色
                            },
                        },
                        {
                            type: 'text',
                            left: 'center',
                            top: '52%',
                            style: {
                                text: all,
                                fontSize: 18,
                                textAlign: 'center',
                                width: 30,
                                height: 25,
                                fill: '#3BA5D9',
                            },
                        },
                    ],
                },
            })
        },
        getFleetCharts(result) {
            let arr = []
            let all = 0
            result.forEach(e => {
                all += e.count
                arr.push({ value: e.count, name: e.fleet })
            })
            let myChart = echarts.init(document.getElementById('fleet'));
            // 绘制图表
            myChart.setOption({
                color: ['#fc8251', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
                tooltip: {
                    trigger: 'item', //数据项图形触发
                    formatter: '{b}: {c} 辆 ({d}%)', // 展示格式
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            excludeComponents: ['toolbox'],
                            pixelRatio: 2 // 控制导出图片的分辨率  
                        }
                    }
                },
                title: {
                    text: "车队占比",
                    textStyle: {
                        color: '#1E1E1E',
                        fontSize: 18,
                        fontWeight: 500,
                    },
                    padding: [10, 0, 0, 10], //标题位置
                },
                series: [
                    {
                        name: '来车量',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: ['50%', '70%'],
                        clockwise: false,
                        label: {
                            normal: {
                                position: 'outside',
                                formatter: '{b}\n{c} 辆 ({d}%)',
                            },
                        },
                        data: arr,
                    },
                ],
                graphic: {
                    elements: [
                        {
                            type: 'text', // 组件类型
                            left: 'center', //定位
                            top: '43%', // 定位
                            style: {
                                // 样式
                                text: '记录总数(条)', //文字
                                fontSize: 13, //文字大小
                                textAlign: 'center', //定位
                                width: 30,
                                height: 30,
                                fill: 'darkgray', // 字体颜色
                            },
                        },
                        {
                            type: 'text',
                            left: 'center',
                            top: '52%',
                            style: {
                                text: all,
                                fontSize: 18,
                                textAlign: 'center',
                                width: 30,
                                height: 25,
                                fill: '#3BA5D9',
                            },
                        },
                    ],
                },
            })
        },
        getGoodCharts(result) {
            let arr = []
            let all = 0
            result.forEach(e => {
                all += e.count
                arr.push({ value: e.count, name: e.goods })
            })
            let myChart = echarts.init(document.getElementById('goods'));
            // 绘制图表
            myChart.setOption({
                color: ['#fc8251', '#5470c6', '#75bedc', '#ef6567', '#f9c956', '#75bedc', '#91cd77'],
                tooltip: {
                    trigger: 'item', //数据项图形触发
                    formatter: '{b}: {c} 辆 ({d}%)', // 展示格式
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {
                            show: true,
                            excludeComponents: ['toolbox'],
                            pixelRatio: 2 // 控制导出图片的分辨率  
                        }
                    }
                },
                title: {
                    text: "运输货物占比",
                    textStyle: {
                        color: '#1E1E1E',
                        fontSize: 18,
                        fontWeight: 500,
                    },
                    padding: [10, 0, 0, 10], //标题位置
                },
                series: [
                    {
                        name: '来车量',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: ['50%', '70%'],
                        clockwise: false,
                        label: {
                            normal: {
                                position: 'outside',
                                formatter: '{b}\n{c} 辆 ({d}%)',
                            },
                        },
                        data: arr,
                    },
                ],
                graphic: {
                    elements: [
                        {
                            type: 'text', // 组件类型
                            left: 'center', //定位
                            top: '43%', // 定位
                            style: {
                                // 样式
                                text: '记录总数(条)', //文字
                                fontSize: 13, //文字大小
                                textAlign: 'center', //定位
                                width: 30,
                                height: 30,
                                fill: 'darkgray', // 字体颜色
                            },
                        },
                        {
                            type: 'text',
                            left: 'center',
                            top: '52%',
                            style: {
                                text: all,
                                fontSize: 18,
                                textAlign: 'center',
                                width: 30,
                                height: 25,
                                fill: '#3BA5D9',
                            },
                        },
                    ],
                },
            })
        },
        getCountChart(result) {
            let count = result.count
            let date = result.date
            let chartBox2 = echarts.init(document.getElementById('countC'));
            const option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%']
                    },
                },
                title: {
                    left: 'center',
                    text: '日来车辆统计',
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none',
                        },
                        restore: {},
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date,
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                    },
                ],
                series: [
                    {
                        name: '数量',
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 6,
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(255, 70, 131)',
                        },
                        data: count,
                    },
                ],
            }
            chartBox2.setOption(option)
        },
        initLogInfo() {
            getLoginfo(null).then((res) => {
                if (res.success) {
                    Object.keys(res.result).forEach((key) => {
                        res.result[key] = res.result[key] + ''
                    })
                    this.loginfo = res.result
                }
            })
            getVisitInfo().then((res) => {
                if (res.success) {
                    this.visitInfo = res.result
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.circle {
    animation: pulse 1s infinite alternate; /* 添加闪烁动画效果 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    top: 30px; /* 向下移动 20px，可以根据需要调整 */
}
</style>